<template>
  <div style="margin-top: 100px">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="block" style="width: 180px">
          <div class="left_group">
            图书
          </div>
          <div v-for="category in categories">
            <el-popover
                class="popover"
                placement="right-start"
                width="600"
                trigger="hover"
            >
              <!--类别1 循环开始-->
              <div v-for="category1 in category.childCategory">
                 <a :href='"category?p"+category1.href' class="category1">{{ category1.name }}</a><br>
                <div style="margin-left: 15px">
                  <!-- 类别2 循环开始-->
                  <div v-for="(category2,i) in category1.childCategory"
                       style="display: inline-block;margin: 5px">
                    <a :href='"category?"+category2.href'  class="category2">{{ category2.name }}</a>
                    <el-divider v-if="i!==category1.childCategory.length-1" direction="vertical"/>
                  </div>
                  <!--  类别2 循环结束-->
                </div>
                <!--  类别1 循环结束 -->
              </div>
              <el-button slot="reference" style="width: 180px">{{ category.name }}</el-button>
            </el-popover>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="block" style="width: 810px">
          <el-carousel height="300px">
            <el-carousel-item v-for="item in bannerArr">
              <img :src="item.url" alt="" style="width: 100%;height:270px">
              <span>{{ item.title }}</span>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="margin-top:50px">
          <span>好书推荐/</span><a href="">更多</a>
          <hr>
          <el-row :gutter="20">
            <el-col :span="6" v-for="b in bookArr">
              <el-card :body-style="{ padding: '0px' }">
                <div class="book_div" style="padding: 20px 20px 0 20px">
                  <a href='javascript:void(0)' @click="detail(b.id)" >
                    <img :src="b.picture" width="auto" height="140" alt="">
                  </a>
                </div>
                <div style="padding: 14px;">
                  <a href='javascript:void(0)' @click="detail(b.id)" style="text-decoration: none;color: #333">
                    <p style="margin: 0 auto;word-break: break-all;font-size: 12px;line-height: 20px;height: 40px">
                      {{ b.bookName }}
                    </p>
                  </a>
                  <div style="color: #bbb;font-size: 12px">
                        <span style="float: left;font-style: normal;margin-right: 3px;font-size: 16px;color: #bf7f5f;">
                          ￥{{ b.price }}
                        </span>起
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";
import {mapState} from "vuex";
import router from "@/router";

export default {
  name: 'HomeView',
  computed: {
    ...mapState(["bookId"])
  },
  data() {
    return {
      activeIndex: '1',
        activeIndex2: '1',
      categories: [],
      bannerArr: [
        {title: "学习是一门艺术", url: "https://img0.kfzimg.com/operation/ce/05/ce05fda28b5a22765dbf834afeb1a4b6.jpg"},
        {title: "只此青绿", url: "https://img0.kfzimg.com/operation/7f/20/7f20a20ed904a1bccdc218f08261f776.png"},
        {title:'异兽故事集',url:'https://img0.kfzimg.com/operation/4a/9d/4a9d92406b22bdefa2df62947c77287e.png',}
      ],
      bookArr: [
        {
          id:'',
          bookName:'',
          classify:'',
          picture:'',
          author:'',
          price:'',
          info:''
        }
      ],
      bookCategory01:[
        {
          id:'',
          bookName:'',
          classify:'',
          picture:'',
          author:'',
          price:'',
          info:''
        }
      ],
      press:[
        {
          name:'',
        }
      ]
    };
  },
  mounted() {
    //获取类别数据
    axios.get("/category/index").then(r=>{
      if (r.data.state===20000){
        console.log("服务端发送的类别数据为：")
        console.log(r.data.data)
        this.categories = r.data.data
      }
    }).catch(e=>console.log(e))
    //获取首页书籍展示信息
    axios.get("/book/index").then(r=>{
      if (r.data.state===20000){
        console.log("收到服务器的书数据：")
        console.log(r.data.data)
        this.bookArr = r.data.data
      }
    })
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    detail(id) {
      router.push("/detail?"+id)
    }
  }
}
</script>

<style scoped>
.category1 {
  color: black;
  font-size: 18px;
  font-weight: bolder;
}

.category2 {
  color: black;
}

.left_group {
  width: 142px;
  height: 36px;
  line-height: 36px;
  background-color: #8c222c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #8c222c;
  font-family: Helvetica, Arial, Microsoft YaHei, sans-serif;
  padding: 0 19px;
}

.el-popover > a {
  text-decoration: none;
  font-size: 13px;
  color: #333;
}

a {
  text-decoration: none;
}
</style>